<template>
  <div class="barticleapp">
    <!--品牌-->
    <div class="barticleappcontent0">
      <div class="barticleappcontent">
        <div class="barticleapp1">
          <div class="barticleapp1_1">
            <p id="bbb">品牌</p>
            <span>全部<i class="iconfont icon-mjiantou"></i></span>
          </div>
          <div class="barticleapp1_2 bpf">
            <a href="#">HOWL</a>
            <a href="#">NANAWANG</a>
            <a href="#">JUSTO</a>
            <a href="#">Ordinary</a>
            <a href="#">MOLBY</a>
            <a href="#">NOYCOMMON</a>
          </div>
        </div>
        <!--分类-->
        <div class="barticleapp2">
          <div class="barticleapp2_1">
            <p>分类</p>
            <span>全部<i class="iconfont icon-arrow-up"></i></span>
          </div>

          <div class="barticleapp2_a">
            <div class="barticleapp2_a_1">
              <p>服饰/上衣</p>
              <div class="barticleapp2_a_2"><span></span>全选</div>
            </div>
            <div class="barticleapp2_2">
              <a href="#">卫衣&套头衫</a>
              <a href="#">针织衫&毛衣</a>
              <a href="#">上衣</a>
              <a href="#">T恤</a>
            </div>
          </div>

          <div class="barticleapp2_apublic">
            <div class="barticleapp2_a">
              <div class="barticleapp2_a_1">
                <p>服饰/内衣</p>
                <div class="barticleapp2_a_2"><span></span>全选</div>
              </div>
              <div class="barticleapp2_2">
                <a href="#">塑身衣</a>
              </div>
            </div>

            <div class="barticleapp2_a">
              <div class="barticleapp2_a_1">
                <p>服饰/外套</p>
                <div class="barticleapp2_a_2"><span></span>全选</div>
              </div>
              <div class="barticleapp2_2">
                <a href="#">夹克</a>
                <a href="#">其他</a>
                <a href="#">大衣</a>
                <a href="#">羽绒服</a>
                <a href="#">斗篷</a>
                <a href="#">皮草</a>
              </div>
            </div>
          </div>
        </div>
        <!--价格-->
        <div class="barticleapp1">
          <div class="barticleapp1_1">
            <p>价格区间</p>
          </div>
          <div class="barticleapp1_2 zyj">
            <a href="#">100元-200元</a>
            <a href="#">200元-300元</a>
            <a href="#">300元-400元</a>
            <a href="#">400元-500元</a>
            <a href="#">500元-600元</a>
          </div>
        </div>
        <!--来源-->
        <div class="barticleapp2">
          <div class="barticleapp2_1">
            <p>来源</p>
          </div>
          <div class="barticleapp2_2">
            <a href="#">ASOS</a>
            <a href="#">East Dane</a>
            <a href="#">Farfetch</a>
            <a href="#">FWRD</a>
          </div>
        </div>
      </div>
      <!--底部-->
      <div class="barticleappfooter">
        <span>重置</span>
        <span @click="search()">确定</span>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
    export default {
      data(){
        return {
          list:[]
        }
      },
      mounted:function () {
        $("#shaixuan").click(function(){
          $(".barticleappcontent0").animate({
            right:"0%",
          },200);
          $("body").append("<div class='mengban' style='position:fixed;left:0;top:0;width:100%;height:100%;background:#333;opacity:.4'></div>")
        });
        $("#bbb").click(function(){
          $(".barticleappcontent0").animate({
            right:"-80%",
          },200);
          $(".mengban").css({display:"none"});
        });
        $(".barticleapp1_1").find("span").click(function(){
          $(".barticleappdetalis").css({display:"block"});
        });
        $(".barticleappdetalis1").find("i").click(function(){
          $(".barticleappdetalis").css({display:"none"});
        });
        $(".barticleapp2_1").find("span").toggle(function(){
//			$(this).find("i").toggleClass("icon-arrow-up1");
          $(this).find("i").css({transform:"rotate(-180deg)",transformOrigin:"70% 40%",transition:"all 0.2s"});
          $(".barticleapp2_apublic").css({display:"block"});
        },function(){
          $(this).find("i").css({transform:"rotate(-360deg)",transformOrigin:"70% 40%",transition:"all 0.2s"});
          $(".barticleapp2_apublic").css({display:"none"});
        });
        $(".barticleapp2_a_2").toggle(function(){
          $(this).find("span").css({background:"#ed145b",border:"none"});
          $(this).find("span").append("<i class='iconfont icon-ok' style='font-size:0.1rem;color:white;position:absolute;top:0.01rem;left:0.015rem'></i>");
          $(this).parent().siblings().find("a").css({border:"1px solid #ed145b",color:"#ed145b"});
        },function(){
          $(this).find("span").css({background:"white",border:"1px solid #999"});
          $(this).find("span").find("i").css({display:"none"});
          $(this).parent().siblings().find("a").css({border:"none",color:"#333"});
        })
//		每个a变色
        $(".barticleapp").find("a").toggle(function(){
          $(this).css({border:"1px solid #ed145b",color:"#ed145b"});
        },function(){
          $(this).css({border:"none",color:"#333"});
        })
      },
      methods:{
        search:function () {
          var that=this;
          for(var i=0;i<$(".bpf").find("a").length;i++){
            if($(".bpf").find("a").eq(i).css("color")=="rgb(237, 20, 91)"){
              var z=$(".bpf").find("a").eq(i).html();
            }
          }
          for(var i=0;i<$(".zyj").find("a").length;i++){
            if($(".zyj").find("a").eq(i).css("color")=="rgb(237, 20, 91)"){
              var y=$(".zyj").find("a").eq(i).html().substring(0,3);
              var j=$(".zyj").find("a").eq(i).html().substring(5,8);
            }
          }
            fetch('http://localhost:3000/listson', {
              method: 'post',
              headers: {
                "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
              },
              body: `z=${z}&y=${y}&j=${j}`
            })
              .then(function (data) {
                data.json().then(function (data) {
                  that.list=data;
                  that.$emit("chaxun",that.list);
                  $(".barticleappcontent0").animate({
                    right:"-80%",
                  },200);
                  $(".mengban").css({display:"none"});
                })
              })
              .catch(function (error) {
                console.log('Request failed', error);
              });
          }
        }
      }
</script>

<style scoped lang="scss">
  .barticleapp{
    display: block;
  }
  .barticleappcontent0{
    position: fixed;
    top:0;
    right:-80%;
    width:80%;
    height:100%;
    background: white;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    z-index:1
  }
  .barticleappcontent{
    flex: 1;
    overflow-y: auto;
  }
  .barticleappcontent::-webkit-scrollbar{
    display: none;
  }
  .barticleapp1{
    width:100%;
    padding:0.2rem 0.2rem;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
  }
  .barticleapp1_1{
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.2rem;
  }
  .barticleapp1_1 p{
    font-size: 0.18rem;
    color:#4a4a4a;
  }
  .barticleapp1_1 span{
    font-size: 0.16rem;
    color:#999;
  }
  .barticleapp1_1 span i{
    padding-left:0.1rem;
  }
  .barticleapp1_2{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .barticleapp1_2 a{
    width:48%;
    height:0.55rem;
    background: #f5f5f5;
    font-size:0.14rem;
    text-align: center;
    line-height: 0.55rem;
    margin-top:0.1rem;
    border-radius: 5px ;
    color: #333;
  }

  .barticleapp2{
    width:100%;
    padding:0.2rem 0.2rem;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
  }
  .barticleapp2_1{
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.2rem;
  }
  .barticleapp2_1 p{
    font-size: 0.18rem;
    color:#4a4a4a;
  }
  .barticleapp2_1 span{
    font-size: 0.16rem;
    color:#999;
  }
  .barticleapp2_1 span i{
    display: inline-block;
    padding-left:0.1rem;
  }
  .barticleapp2_a_1{
    display: flex;
    justify-content: space-between;
    margin-top:0.2rem;
  }
  .barticleapp2_a_1 p{
    font-size:0.14rem;
    color:#999;
    padding-left:0.1rem;
  }
  .barticleapp2_a_1 .barticleapp2_a_2{
    font-size:0.14rem;
    color:#999;
  }
  .barticleapp2_a_2 span{
    float: left;
    width:0.14rem;
    height:0.14rem;
    border: 1px solid #999;
    border-radius: 50%;
    margin-top:0.02rem;
    margin-right: 0.05rem;
    position: relative;
  }
  .barticleapp2_apublic{
    display: none;
  }
  .barticleapp2_2{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .barticleapp2_2 a{
    width:48%;
    height:0.55rem;
    background: #f5f5f5;
    font-size:0.14rem;
    text-align: center;
    line-height: 0.55rem;
    margin-top:0.1rem;
    border-radius: 5px ;
    color: #333;
  }

  .barticleappfooter{
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: space-between;
  }
  .barticleappfooter span{
    display: block;
    width:50%;
    height:100%;
    text-align: center;
    line-height: 0.5rem;
    font-size: 0.18rem;
  }
  .barticleappfooter span:first-child{
    background: white;
    color: #333;
  }
  .barticleappfooter span:last-child{
    background: #ed145b;
    color: white;
  }
</style>
